<template>
	<view>
		<view class="add-cover" @click="upload">
			<!-- 这里使用 :src="cover" 将src动态赋值-->
			<image class="cover" :src="cover" mode="aspectFill"></image>
			<view class="default">
				<image src="../../static/images/add.png" class="add-icon"></image>
				<!-- 没有上传图片时状态是添加，上传版完毕是切换 -->
				<text>点击{{ cover ? '切换' : '添加' }}封面</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cover: ''
		};
	},
	methods: {
		// 方式一：使用箭头函数
		upload() {
			uni.chooseImage({
				count: 1, //默认9,这里设置只允许选择一张图片
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //这里选择从相册选择，也可删除此项设置默认拍照和相册两种选择
				success: res => {
					// 实际开发中，成功的回调函数中是一个上传图片到服务器的接口，这里只是做了简单的效果，实际根据接口需要的参数格式进行上传
					// console.log(JSON.stringify(res.tempFilePaths)); 打印的结果是以数组方式返回的，所以我们只需要取第一个值：["blob:http://localhost:8080/c18cded6-ab83-4d0e-9ccd-ce2e402b7d3f"] 
					this.cover = res.tempFilePaths[0] // 将选择的图片赋值给我们定义的cover
				}
			});
		}


		// 方式二：不使用箭头函数（不使用箭头函数就需要定义变量去赋值this,如下\_this）
		// upload() {
		// var \_this = this
		// uni.chooseImage({
		// count: 1, //默认9,这里设置只允许选择一张图片
		// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		// sourceType: ['album'], //这里选择从相册选择，也可删除此项设置默认拍照和相册两种选择
		// success: function(res) {
		// \_this.cover = res.tempFilePaths[0]
		// }
		// });
		// }
	}
}
</script>

<style lang="scss">
.cover {
	width: 100%;
	height: 350rpx;
}

.default {
	background-color: #f8f9fc;
	width: 100%;
	height: 350rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: red;
	font-weight: 800;
	position: absolute;
	top: 0;
	background-color: rgba(255, 255, 255, 0.2);
}

.add-icon {
	width: 50rpx;
	height: 50rpx;
	margin-bottom: 20rpx;
}
</style>
